@(tweet: Tweet)(implicit request: RequestHeader)
@import helper._
@import utils.RequestHelper
@import play.api.libs.json.Json
@import models.JsonFormats.tweetFormat

@uid() = @{request.session.get("uid").getOrElse("-1").toInt}
@main(s"${App.siteSetting.name} - ${tweet.title}", "tweet", "说说", tweet.title) {
<link rel="stylesheet" href="/assets/plugins/quill/quill.snow.css">
<link rel="stylesheet" href="/assets/plugins/highlight/styles/monokai-sublime.css">
<style>
/* Set default font-family */
#quill-container {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, "STHeiti Light", Tahoma, Arial, sans-serif;
  height: 200px;
}
.layui-upload-file, .layui-upload-button { display: none;}

.ql-editor {
  color: #3d464d;
  white-space: normal;
}
.ql-editor p, .ql-editor ol, .ql-editor ul {
  line-height: 28px;
}
.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    margin: 5px 0px 5px;
    padding: 10px 0px 5px;
}
.ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    margin-top: 15px;
}
</style>
<div class="main layui-clear">
  <div class="wrap">
    <div class="content detail" style="margin-right:0">
      <div class="fly-panel detail-box">
        <h1>@{tweet.author.name}的说说</h1>
        <div class="detail-about">
          <a class="jie-user" href="/user/home?uid=@{tweet.author._id}">
            <img src="@tweet.author.headImg" alt="">
            <cite>
              @tweet.author.name
              <em>@utils.DateTimeUtil.toPrettyString(tweet.createTime)发布</em>
            </cite>
          </a>
          <div id="app" class="detail-hits" data-id="@tweet._id">
            <span><i class="iconfont" title="回答">&#xe60c;</i> {{ tweet.replyCount }}</span>
            <span><i class="iconfont icon-zan zan-resource" style="cursor: pointer;" title="点赞" :data-id="tweet._id"  data-type="tweet"></i> {{ tweet.voteCount }}</span>
          </div>
        </div>
        <div class="detail-body photos ql-snow" style="margin-bottom: 20px;">
          <div class="ql-editor">
            @Html(tweet.content)
          </div>
        </div>
      </div>

      <div class="fly-panel detail-box" style="padding-top: 0;">
        <a name="comment"></a>
        <ul class="jieda photos" id="jieda">
          @for(r <- tweet.replies){
          @defining(utils.BitmapUtil.fromBase64String(r.voteStat.bitmap)){ bitmap =>
          <li data-type="tweet" data-id="@{tweet._id}" data-rid="@{r._id}" data-uid="@{r.author._id}">
            <a name="item-@{r._id}"></a>
            <div class="detail-about detail-about-reply">
              <a class="jie-user" href="/user/home?uid=@{r.author._id}">
                <img src="@{r.author.headImg}" alt="">
                <cite>
                  <i>@{r.author.name}</i>
                </cite>
              </a>
              <div class="detail-hits">
                <span>@utils.DateTimeUtil.toPrettyString(r.replyTime)</span>
              </div>
            </div>
            <div class="detail-body jieda-body">
              @Html(r.content)
            </div>
            @if(RequestHelper.isLogin){
            <div class="jieda-reply">
              <span class="jieda-zan @if(bitmap.contains(uid)){zanok}" type="zan"><i class="iconfont icon-zan"></i><em>@{r.voteStat.count}</em></span>
              <span type="reply"><i class="iconfont icon-svgmoban53"></i>回复</span>
              <div class="jieda-admin">
                <!--<span type="edit">编辑</span>-->
                @if(RequestHelper.isOwnerOf(r._id)){
                <span type="del">删除</span>
                }
                <!--<span class="jieda-accept" type="accept">采纳</span>-->
              </div>
            </div>
            }
          </li>
          }
          }
          @if(tweet.replies.isEmpty){
          <li class="fly-none">没有任何回答</li>
          }
        </ul>
        @if(RequestHelper.isLogin){
        <div id="quill-container"></div>
        <div class="layui-form layui-form-pane" style="margin-top: 15px;">
          <form id="form" action="/res/reply" method="post">
            <div class="layui-form-item">
              @CSRF.formField
              <input type="hidden" name="resId" value="@tweet._id">
              <input type="hidden" name="resType" value="tweet">
              <input id="L_content" type="hidden" name="content"/>
              <input id="at-input" type="hidden" name="at" value="">
              <input type="file" name="file" id="LAY-upload-image" data-token="@CSRF.getToken.value" class="layui-upload-file">
              <button class="layui-btn" lay-submit>提交回答</button>
            </div>
          </form>
        </div>
        }
      </div>
    </div>
  </div>
</div>
}
<script type="text/javascript" src="/assets/plugins/quill/quill.min.js"></script>
<script src="/assets/plugins/highlight/highlight.pack.js"></script>
<script>
layui.cache.page = 'jie';
var token = '@CSRF.getToken.value';
var app = new Vue({
  el: '#app',
  data: { tweet: @Html(tweet.toJson.toString) }
});

$(document).on('click', 'i.zan-resource', function(){
  var othis = $(this), resId = othis.attr('data-id'), resType = othis.attr('data-type');
  layui.fly.json('/res/vote', {
    resId: resId
    ,resType: resType
    ,csrfToken: token
  }, function(res){
    app.tweet.voteCount += res.count;
  });
});

@if(RequestHelper.isLogin){
var quill = new Quill('#quill-container', {
  theme: 'snow',
  modules: {
    toolbar: {
      container : [
        [{ 'size': [] }],
        [ 'bold', 'italic', 'underline' ],
        [ 'blockquote', 'code-block' ],
        [{ 'list': 'ordered' }, { 'list': 'bullet'}],
        [{ 'align': [] }],
        [ 'link', 'image' ],
        [ 'clean' ]
      ],
      handlers: {
        image: function(){ $('#LAY-upload-image').click(); }
      }
    }
  }
});

$('#form').submit(function(){
  $('#L_content').val(quill.root.innerHTML);
});

layui.use('upload', function(upload){
  var token = $('#LAY-upload-image').data('token');
  layui.upload({
    elem: '#LAY-upload-image'
    ,method: 'post'
    ,url: '/resource/owner/editor?csrfToken=' + token
    ,success: function(res){
      var range = quill.getSelection(true);
      var Delta = Quill.import('delta');
      quill.updateContents(
        new Delta().retain(range.index)
           .delete(range.length)
           .insert({ image: res.url })
        , 'user');
    }
    ,error: function(){
      layer.msg('error');
    }
  });
});

}

$(document).ready(function() {
  $('pre').each(function(i, block) {
    //$(block).removeClass('ql-syntax').addClass('scala');
    $(block).addClass('scala');
    hljs.highlightBlock(block);
  });
});
</script>
